<template>
  <div class="app-container">
    <div style="padding-bottom:20px; display: flex;">
      <el-button type="primary" size="medium" plain @click="open_message_dialog">写留言</el-button>
    </div>
    <div class="board">
      <el-timeline>
        <el-timeline-item :hide-timestamp="true">
          <el-card>
            <el-avatar class="header-img" :size="40" :src="avatar" />
            <div class="author-info">
              <span class="author-name">*******铜业有限公司-王经理</span>
              <span class="author-time">2023年10月22日 19:13</span>
            </div>
            <div class="icon-btn">
              <span @click="add_reply"><i class="iconfont el-icon-chat-dot-square" /></span>1
              <span><i class="iconfont el-icon-caret-top" /></span>3
            </div>
            <div class="talk-box">
              <p>
                <span class="reply-tltle">技术难题：</span>
                <span class="reply">6微米超薄压延铜箔制备技术</span>
              </p>
              <p>
                <span class="reply-tltle">技术需求说明：</span>
                <span class="reply">"需求背景：随着电子行业的快速发展， 电子产品不断的朝着轻薄化和便携化发展，要求电子产品在不断降低产品体积和厚度的情况下，仍然需要满足信号传输快、功能多样化等性能，这就要求铜箔厚度朝着更薄的方向发展。国内少数厂家陆续于2010年后开始从国外引进压延铜箔生产设备，压延铜箔开始实现国产化，但由于原材料供应和生产技术不成熟等因素，国内厂家可生产的最薄产品厚度均在9微米以上，其中仅有华中铜业目前可稳定提供8微米产品，但与国外同行业相比仍然存在一定的差距。据市场反馈和资料掌握，压延行业领头羊企业日本日矿可稳定生产厚度6微米的压延铜箔产品，且已开始研发厚度4.5微米压延铜箔，所以要求国内生产厂家尽快实现技术突破，打破国外产品的垄断。
                  需解决的技术问题：（1）高质量铜箔坯料制备工艺研究；（2）超薄铜箔高精度轧制技术研究；（3）箔轧辅材（轧制油、轧辊等）性能参数研究。
                  拟实现的主要技术目标（具体指标）：（1）铜箔厚度6±0.5微米，版型公差±3Ⅰ；（2）硬态抗拉强度≥420MPa，延伸率≥1%；软态抗拉强度≤180 MPa，延伸率≥4%；（3）表面达因值≥38；（4）表面粗糙度Ra≤0.05微米。
                  时间期限：2021.1～2021.12
                  拟投入的资金：300万"
                </span>
              </p>
              <p>
                <span class="reply-tltle">合作方式：</span>
                <span class="reply">技术服务</span>
              </p>
              <p>
                <span class="reply-tltle">现有设施情况：</span>
                <span class="reply">中铜华中铜业有限公司成立于2005年9月28日，注册资本17.93亿元，由中国铝业集团有限公司(以下简称“中铝集团”)下属中国铜业有限公司控股，黄石市国有资产经营有限公司参股，是国家高新技术企业和国务院国资委国企改革“双百行动”试点企业。主要产品有光伏太阳能铜带、IC及LED用引线框架材料、青白铜带、无氧银铜带、压延铜箔坯料、异型铜带坯等。主要产品高端电子信息产业用IC用引线框架材料国内市场份额第一、替代进口，压延铜箔坯料国内唯一，新能源产业用极耳材料进入ATL供应链。</span>
              </p>
            </div>
            <div class="reply-box">
              <div class="author-title">
                <el-avatar class="header-img" :size="40" :src="avatar" />
                <div class="author-info">
                  <span class="author-name">湖北师范大学-李老师</span>
                  <span class="author-time">2023年10月23日 15:19</span>
                </div>
                <div class="icon-btn">
                  <span @click="add_reply"><i class="iconfont el-icon-chat-dot-square" /></span>0
                  <span><i class="iconfont el-icon-caret-top" /></span>0
                </div>
                <div class="talk-box">
                  <p>
                    <span class="replyto">回复 *******铜业有限公司-王经理：</span>
                    <span class="reply">王经理你好，我是湖北师范大学李老师，我对贵公司的项目很感兴趣，我的联系方式是188****2895，希望可以进一步交流合作！</span>
                  </p>
                </div>
              </div>
            </div>
            <div v-show="inputshow" v-click-outside="handleBlur" class="my-reply author-title">
              <div class="flex">
                <el-avatar class="header-img" :size="40" :src="avatar" />
                <div class="reply-info">
                  <el-input v-model="my_reply_txt" type="textarea" placeholder="请输入回复内容..." :autosize="{ minRows: 4, maxRows: 10}" />
                </div>
              </div>
              <div class="reply-btn-box">
                <el-button ref="commit" class="reply-btn" size="medium" type="primary" @click="sendCommentReply()">发表评论</el-button>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
        <el-timeline-item :hide-timestamp="true">
          <el-card>
            <el-avatar class="header-img" :size="40" :src="avatar" />
            <div class="author-info">
              <span class="author-name">*****光电股份有限公司</span>
              <span class="author-time">2023年10月15日 14:35</span>
            </div>
            <div class="icon-btn">
              <span><i class="iconfont el-icon-chat-dot-square" /></span>
              <span><i class="iconfont el-icon-caret-top" /></span>
            </div>
            <div class="talk-box">
              <p>
                <span class="reply-tltle">技术难题：</span>
                <span class="reply">6微米超薄压延铜箔制备技术</span>
              </p>
              <p>
                <span class="reply-tltle">技术需求说明：</span>
                <span class="reply">
                  需求背景：项目产品可适合各恶劣环境下使用，能为军工、航天、航空、航海方面作出贡献。军工、航天、航空、航海等方面的科技发展是国家强大的体现，为了国家的复兴尽绵薄之力。
                  需解决的技术问题：（1）密封封装的工艺方案验证；（2）密封封装产品的可靠性验证。
                  拟实现的主要技术目标（具体指标）：密封性：1.0*10^-8 Pa
                  时间期限：2021年06月至2022年06月
                  拟投入的资金：500万
                </span>
              </p>
              <p>
                <span class="reply-tltle">合作方式：</span>
                <span class="reply">技术开发</span>
              </p>
              <p>
                <span class="reply-tltle">现有设施情况：</span>
                <span class="reply">黄石晨信光电股份有限公司成立于2001年3月份，是一家主要从事光电子器件研发、制造和技术服务的国家高新技术企业，也是新三版上市公司，股票代码为835628。公司位于湖北省大冶市罗桥工业园港湖路4号，占地面积约12149㎡，公司注册资金为2201.47万元，现有职工数有750人，2020年度产值达1.96亿元，主要经营方向是光通信网络无源器件，主要产品有陶瓷插芯、光纤连接器、尾纤、光衰减器、光滤波器、AOC跳线、MPO、光准直器、光波分复用器等光无源器件。公司管理通过质量、环境、职业健康与安全综合管理体系认证、全部产品通过ROHS和泰尔认证。主要产品为国内大型知名光器件企业配套。</span>
              </p>
            </div>
          </el-card>
        </el-timeline-item>
        <el-timeline-item :hide-timestamp="true">
          <el-card>
            <el-avatar class="header-img" :size="40" :src="avatar" />
            <div class="author-info">
              <span class="author-name">湖北师范大学</span>
              <span class="author-time">2023年10月22日 23:13</span>
            </div>
            <div class="icon-btn">
              <span><i class="iconfont el-icon-chat-dot-square" /></span>
              <span><i class="iconfont el-icon-caret-top" /></span>
            </div>
            <div class="talk-box">
              <p>
                <span class="reply">我写了一条新的留言<br>我写了一条新的留言<br>我写了一条新的留言</span>
              </p>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <el-dialog title="写留言" :visible.sync="message_dialog" width="60%">
      <el-form ref="form" :model="form" label-width="80px" label-position="top" autocomplete="off">
        <el-form-item label="姓名">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="form.userAccount" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" />
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="form.region" placeholder="请选择班级">
            <el-option label="一班" value="一班" />
            <el-option label="二班" value="二班" />
            <el-option label="三班" value="三班" />
          </el-select>
        </el-form-item>
        <el-form-item label="爱好">
          <el-checkbox-group v-model="form.aihao">
            <el-checkbox label="音乐" name="type" />
            <el-checkbox label="运动" name="type" />
            <el-checkbox label="电影" name="type" />
            <el-checkbox label="编程" name="type" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="个人说明">
          <el-input v-model="form.gerenshuoming" type="textarea" style="width:300px;" />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import avatar from '@/assets/avatar1.svg'

const clickOutside = {
  bind(el, binding) {
    // 在元素上绑定一个点击事件监听器
    el.clickOutsideEvent = function(event) {
      // 检查点击事件是否发生在元素的内部
      if (!(el === event.target || el.contains(event.target))) {
        // 如果点击事件发生在元素的外部，则触发指令绑定的方法,将点击的event数据传过去
        binding.value(event)
      }
    }
    // 在文档上添加点击事件监听器
    document.addEventListener('click', el.clickOutsideEvent)
  },
  unbind(el) {
    // 在元素上解除点击事件监听器
    document.removeEventListener('click', el.clickOutsideEvent)
  }
}
export default {
  directives: {
    'click-outside': clickOutside // 注册自定义指令
  },
  data() {
    return {
      avatar: avatar,
      message_dialog: false,
      form: {
        name: '',
        userAccount: '',
        password: '',
        sex: '',
        class: '',
        aihao: '',
        gerenshuoming: ''
      },
      my_reply_txt: '',
      inputshow: false
    }
  },
  methods: {
    open_message_dialog() {
      this.message_dialog = true
    },
    add_reply() {
      this.inputshow = true
    },
    handleBlur(event) {
      // console.log('点击其它区域啦', event.target.classList.value)
      if (event.target.classList.value !== 'iconfont el-icon-chat-dot-square') {
        this.inputshow = false
      }
    },
    sendCommentReply() {
    }
  }
}
</script>

<style lang="scss" scoped>
.header-img{
  display: inline-block;
  vertical-align: top;
}
.author-title{
  padding: 10px;
}
.author-info{
  display: inline-block;
  vertical-align: top;
  margin-left: 10px;
  height: 40px;
  span{
    display: block;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .author-name{
    color: #000;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
  }
  .author-time{
    font-size: 14px;
    line-height: 16px;
    color: #666;
  }
}
.icon-btn{
  text-align: right;
  width: 92px;
  padding: 0;
  float: right;
  span{
    cursor: pointer;
  }
  .iconfont{
    margin: 0 5px;
    font-size: 18px;
  }
}
.talk-box{
  margin: 10px 50px;
  p{
    margin: 0;
  }
  p ~ p {
    margin-top: 3px;
  }
  .replyto{
    font-size: 16px;
    color: #666;
  }
  .reply-tltle{
    font-size: 16px;
    color: #000;
    font-weight: 600;
  }
  .reply{
    font-size: 16px;
    line-height: 22px;
    color: #000;
  }
}
.reply-box{
  margin: 0 0 0 50px;
  background-color: #efefef;
  .icon-btn{
    width: 92px;
  }
}
.reply-box ~ .reply-box{
  border-top: #dfdfdf solid 1px;
}
.flex{
  display: flex;
}
.my-reply{
  margin: 0 0 0 50px;
  padding-right: 0px;
  .reply-info{
    vertical-align: top;
    margin: 0px 0px 10px 10px;
    width: 100%;
  }
  .reply-btn-box{
    display: flex;
    justify-content: flex-end;
  }
}
.el-form{
  margin-left: 40px;
  .el-input,.el-select{
    width: 300px;
  }
}
</style>
